<template>
  <el-dialog
    :visible.sync="dialogConf.show"
    :width="dialogConf.width"
    @closed="closed"
  >
    <template #title>
      <div class="dialogTitle">{{ dialogConf.title }}</div>
    </template>
    <my-form
      ref="form"
      :layout="elRows"
      :model="model"
      :form-conf="formConf"
      :btn-conf="btnConf"
      @btnClick="btnClick"
    >
    </my-form>
  </el-dialog>
</template>

<script>
import { elRowsGetByName } from '@/components/common/common'
import MyForm from '@/components/base/myForm'

export default {
  name: 'Add',
  components: { MyForm },
  props: {
    dialogConf: {
      type: Object,
      default() {
        return { show: true, title: '新增', width: '800px' }
      }
    }
  },
  data() {
    return {
      model: {
        name: null,
        dbType: null,
        jdbcUrl: null,
        userName: null,
        password: null,
        projectId: null
      },
      btnConf: {
        buttons: [
          { name: '提交', type: 'primary' },
          { name: '测试连接', type: 'primary' },
          { name: '取消' }
        ]
      },
      formConf: {
        rules: {
          name: [
            { required: true, message: '请输入数据库别名', trigger: 'blur' }
          ],
          jdbcUrl: [
            { required: true, message: '请输入jdbcUrl', trigger: 'blur' }
          ],
          dbType: [
            { required: true, message: '请选择数据库类型', trigger: 'blur' }
          ]
        }
      },
      elRows: [
        {
          elCols: [
            {
              span: 12,
              elFormItem: {
                prop: 'name',
                label: '数据库别名',
                type: 'input'
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 12,
              elFormItem: {
                prop: 'dbType',
                label: '数据库类型',
                type: 'select',
                options: []
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 23,
              elFormItem: {
                prop: 'jdbcUrl',
                label: 'jdbcUrl',
                type: 'input'
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 12,
              elFormItem: {
                prop: 'userName',
                label: '用户名',
                type: 'input'
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 12,
              elFormItem: {
                prop: 'password',
                label: '密码',
                type: 'input'
              }
            }
          ]
        },
        {
          elCols: [
            {
              span: 12,
              elFormItem: {
                prop: 'projectId',
                label: '关联项目',
                type: 'select',
                options: []
              }
            }
          ]
        }
      ],
      rowConf: {
        gutter: 40
      }
    }
  },
  created() {
    this.getDbType()
    this.getProjectNames()
  },
  mounted() {},
  methods: {
    async btnClick(btnItem) {
      try {
        if (btnItem.name === '提交') {
          let validFlag = false
          this.$refs.form.$refs.form.validate((valid) => {
            validFlag = valid
          })
          if (validFlag) {
            const params = Object.assign({}, this.model)
            btnItem.loading = true
            const data = await this.$axios.post('/dbInfo/add', params)
            this.$message.success(data.msg)
            this.success()
          }
        } else if (btnItem.name === '取消') {
          this.closed()
        } else if (btnItem.name === '测试连接') {
          let validFlag = false
          this.$refs.form.$refs.form.validate((valid) => {
            validFlag = valid
          })
          if (validFlag) {
            const params = Object.assign({}, this.model)
            btnItem.loading = true
            const data = await this.$axios.post('/db/testCon', params)
            this.$message.success(data.msg)
          }
        }
      } catch (e) {
        console.log(e)
      } finally {
        btnItem.loading = false
      }
    },
    closed(...args) {
      this.$emit('closed', ...args)
    },
    success(...args) {
      this.$emit('success', ...args)
    },
    async getDbType() {
      const data = await this.$axios.get('/db/dbType')
      const elCol = elRowsGetByName(this.elRows, 'dbType')
      console.log('data:' + JSON.stringify(data.data))
      elCol.elFormItem.options = data.data
      const item = data.data[0]
      if (item != null && item.value != null) {
        this.model.dbType = item.value
      }
    },
    async getProjectNames() {
      const data = await this.$axios.get('/project/names')
      const elCol = elRowsGetByName(this.elRows, 'projectId')
      elCol.elFormItem.options = data.data
    }
  }
}
</script>

<style scoped></style>
